<template>
  <el-row class="big-screen-box">
    <el-col :span="24" class="b-s-c">
      <el-col :span="9">
        <!-- left -->
        <el-col :span="24" class="b-s-c-l">
          <el-col :span="13" class="left">
            <el-col :span="12" class="b-s-c-l-top">
              <div class="b-s-c-l-3">
                <div style="height:100%;width:100%">
                  <div
                    class="index-title flex"
                    style="width:90%;justify-content: space-between !important;"
                  >
                    <div>户籍省份分布</div>
                    <div style="font-size:0.6vw">单位：人</div>
                  </div>
                  <hjChar style="width:100%;height:100%;"></hjChar>
                </div>
              </div>
            </el-col>
            <el-col :span="12" class="b-s-c-l-but">
              <div class="b-s-c-l-4">
                <div class="index-title" style="flex:0.1">户籍统计</div>
                <div class="vlue-title">
                  <div v-for="(item,index) in hjCountCard" :key="index" class="v-t-box">
                    <div class="text">{{item.text}}</div>
                    <div class="value">{{item.value}}</div>
                  </div>
                </div>
                <div style="width:100%;height:100%;flex:0.8">
                  <hjtjChar style="width:100%;height:100%"></hjtjChar>
                </div>
              </div>
            </el-col>
          </el-col>
          <el-col :span="11" class="right">
            <el-col :span="4" class="b-s-c-l-1">
              <div class="index-title">男女分布情况</div>
              <div class="car-box1">
                <div v-for="(item,index) in leftListCard" :key="index" class="car-item">
                  <el-image class="car-item-img" :src="item.img" fit="cover"></el-image>
                  <div class="car-item-text">{{item.text}}</div>
                  <div class="car-item-value">{{item.value}}</div>
                </div>
              </div>
            </el-col>

            <el-col :span="9" class="b-s-c-c-2">
              <carChar style="width:100%;height:100%;padding:0.6vw"></carChar>
              <div class="index-title" style="position: absolute;right: 0;">单位：辆</div>
            </el-col>
            <el-col :span="6" class="b-s-c-r-3">
              <div class="index-title">关爱服务对象统计</div>
              <div class="car-box1">
                <div v-for="(item,index) in gaCountCard" :key="index" class="car-item">
                  <div class="car-item-text">{{item.text}}</div>
                  <div class="car-item-value">{{item.value}}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="b-s-c-r-2">
              <div class="index-title" style="flex:0.1;width: 100%;height: 100%;display: flex;">工业结构</div>
              <div class="car-box2">
                <div v-for="(item,index) in gyCountCard" :key="index" class="car-item">
                  <div class="car-item-text">{{item.text}}</div>
                  <div class="car-item-value">{{item.value}}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="5" class="b-s-c-l-2">
              <div class="index-title">重点人群统计</div>
              <div class="car-box2">
                <div v-for="(item,index) in pCountCard" :key="index" class="car-item">
                  <div
                    class="car-item-value"
                    :style="{
                  color:item.color
                }"
                    :class="`border${index+1}`"
                  >{{item.value}}</div>
                  <div class="car-item-text">{{item.text}}</div>
                </div>
              </div>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="7">
        <!-- center -->
        <div class="b-s-c-c">
          <el-col :span="18" class="top">
            <div class="b-s-c-c-1">
              <div class="b-c-user-box">
                <div class="border-jiao left-top"></div>
                <div class="border-jiao right-top"></div>
                <div class="border-jiao left-bottom"></div>
                <div class="border-jiao right-bottom"></div>
                <el-image :src="require('@/assets/index/user.png')" class="u-img"></el-image>
                <div class="u-info">预警：西南入口，19:25分陌生人进入一名</div>
              </div>
              <div class="b-s-c-c-1-text1">平沙小学</div>
              <div class="b-s-c-c-1-yuan-red"></div>
              <div class="b-s-c-c-1-text2">平沙街</div>
              <div class="b-s-c-c-1-text3">华健门诊部</div>
              <div class="b-s-c-c-1-yuan-h"></div>
              <div class="b-c-user-box2">
                <div class="border-jiao left-top"></div>
                <div class="border-jiao right-top"></div>
                <div class="border-jiao left-bottom"></div>
                <div class="border-jiao right-bottom"></div>
                <div class="u-info">
                  车道：G362国道有二十米拥
                  堵，预计拥堵时间10分
                  钟。
                </div>
              </div>
              <div class="b-s-c-c-1-text4">平沙商贸广场</div>
              <div class="b-s-c-c-1-text5">平沙村文化广场</div>
            </div>
          </el-col>
          <el-col :span="6" class="but">
            <div class="b-s-c-c-3">
              <nlChar style="width:100%;height:100%;padding:0.6vw" :charData="charData"></nlChar>
              <div class="index-title" style="position: absolute;right: 0;">单位：人</div>
            </div>
          </el-col>
        </div>
      </el-col>
      <el-col :span="8">
        <!-- right -->
        <div class="b-s-c-r">
          <el-col :span="11" class="left">
            <div class="b-s-c-r-1">
              <div class="index-title">地理介绍</div>
              <div class="b-s-c-r-1-title">白云区均禾平沙社区</div>
              <div class="b-s-c-r-1-text">白云区均禾平沙社区一地理介绍。 白云区均禾平沙社区一地理介绍。 白云区均禾平沙社区一地理介绍。</div>
            </div>
            <div class="b-s-c-l-5">
              <div class="index-title">房屋结构</div>
              <div class="car-box1">
                <div v-for="(item,index) in fwListCard" :key="index" class="car-item">
                  <div class="car-item-text">{{item.text}}</div>
                  <div class="car-item-value">{{item.value}}</div>
                </div>
              </div>
            </div>
            <div class="b-s-c-r-4">
              <sbChar style="width:100%;height:100%;"></sbChar>
            </div>
            <div class="b-s-c-r-5">
              <div class="index-title">网格资源</div>
              <div class="car-box1">
                <div v-for="(item,index) in wlCountCard" :key="index" class="car-item">
                  <el-image class="car-item-img" :src="item.img" fit="cover"></el-image>
                  <div class="car-item-text">{{item.text}}</div>
                  <div class="car-item-value">{{item.value}}</div>
                </div>
              </div>
              <div class="bottom-title">
                <div style="margin-left:1vh">在线人数：56人</div>
                <div style="margin-right:1vh">巡查轨迹 l 实时位置</div>
              </div>
            </div>
          </el-col>
          <el-col :span="13" class="right">
            <div class="right-box">
              <div class="index-title">地理介绍</div>
              <div class="video-box">
                <div v-for="(item,index) in videoList" :key="index" class="video-item">
                  <div class="index-title">{{item.title}}：</div>
                  <div class="item-box">
                    <div
                      v-for="(videoItem,videoIndex) in item.list"
                      :key="videoIndex"
                      class="video-f"
                    >
                      <videos
                        class="video-css"
                        controls="controls"
                        autoplay="autoplay"
                        loop="loop"
                        :id="'videoId'+videoIndex"
                        :videoInfo="videoItem"
                        muted="muted"
                      >
                        <!-- <source :src="videoItem.src" type="video/mp4/flv" />您的浏览器不支持 video 标签 请使用谷歌浏览器！！ -->
                      </videos>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import hjChar from "../chars-q/hjChar.vue";
import hjtjChar from "../chars-q/hjtjChar.vue";
import carChar from "../chars-q/carChar.vue";
import nlChar from "../chars/nlChar.vue";
import sbChar from "../chars-q/sbChar.vue";
// import { loadBaiDuMap } from "../../bmpgl_lib.js";
import flvjs from "flv.js";
import videos from "./video-index.vue";

export default {
  components: {
    hjChar,
    hjtjChar,
    sbChar,
    nlChar,
    carChar,
    videos
  },
  data() {
    return {
      // 男女分布情况
      leftListCard: [
        {
          id: 0,
          text: "总人数",
          value: 3000,
          img: require("../../assets/index/zong.png")
        },
        {
          id: 1,
          text: "男性人数",
          value: 1940,
          img: require("../../assets/index/nan.png")
        },
        {
          id: 2,
          text: "女性人数",
          value: 1060,
          img: require("../../assets/index/nv.png")
        }
      ],
      // 房屋结构
      fwListCard: [
        {
          id: 0,
          text: "出租屋",
          value: 2162
        },
        {
          id: 1,
          text: "酒店",
          value: 1940
        },
        {
          id: 2,
          text: "小区",
          value: 1060
        },
        {
          id: 3,
          text: "公寓",
          value: 1060
        }
      ],
      // 重点人群统计
      pCountCard: [
        {
          id: 0,
          text: "涉毒人员",
          value: 235,
          color: "#E94C58"
          // border: 6px solid #e94c58 !important;
        },
        {
          id: 1,
          text: "案底人员",
          value: 132,
          color: "#F58B52"
          // border: 6px solid #f58b52 !important;
        },
        {
          id: 2,
          text: "信访人员",
          value: 334,
          color: "#0AD49B"
          // border: 6px solid #0ad49b !important;
        },
        {
          id: 3,
          text: "涉邪人员",
          value: 49,
          color: "#EBD502"
          // border: 6px solid #ebd502 !important;
        }
      ],
      // 工业结构
      gyCountCard: [
        {
          id: 0,
          text: "小作坊",
          value: 111,
          name: "50%",
          color: "#E94C58"
        },
        {
          id: 1,
          text: "工业园",
          value: 222,
          name: "25%",
          color: "#3478FF"
        },
        {
          id: 2,
          text: "物流园",
          value: 333,
          name: "25%",
          color: "#3478FF"
        }
      ],
      // 户籍统计
      hjCountCard: [
        {
          id: 0,
          text: "户籍人口",
          value: 2162
        },
        {
          id: 1,
          text: "流动人口",
          value: 2162
        }
      ],
      // 关爱
      gaCountCard: [
        {
          id: 0,
          text: "精神病人",
          value: 2162
        },
        {
          id: 1,
          text: "优抚对象",
          value: 1940
        },
        {
          id: 2,
          text: "低保户",
          value: 1060
        },
        {
          id: 3,
          text: "残疾人",
          value: 2162
        },
        {
          id: 4,
          text: "退伍军人",
          value: 2162
        },
        {
          id: 5,
          text: "独居老人",
          value: 2162
        }
      ],
      // 网格资源
      wlCountCard: [
        {
          id: 0,
          text: "网格员",
          value: 3000,
          img: require("../../assets/index/icon1.png")
        },
        {
          id: 1,
          text: "志愿者",
          value: 1940,
          img: require("../../assets/index/icon2.png")
        },
        {
          id: 2,
          text: "巡逻员",
          value: 1060,
          img: require("../../assets/index/icon3.png")
        }
      ],
      charData: [148, 300, 400, 556, 758, 898, 220, 162, 60, 50],
      videoList: [
        {
          title: "东门",
          list: [
            {
              id: 1,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 2,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 3,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            }
          ]
        },
        {
          title: "西门",
          list: [
            {
              id: 1,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 2,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 3,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            }
          ]
        },
        {
          title: "南门",
          list: [
            {
              id: 1,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 2,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 3,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            }
          ]
        },
        {
          title: "北门",
          list: [
            {
              id: 1,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 2,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            },
            {
              id: 3,
              src:
                "http://192.168.11.221:8080/live/34020000001320099039@34020000001320099039.flv"
            }
          ]
        }
      ]
    };
  },
  mounted() {
    const that = this;
    this.$nextTick(() => {
      that.Init();
    });
  },
  methods: {
    Init() {
      // if (flvjs.isSupported()) {
      // if (this.videoInfo.src != null) {
      // var videoElement = document.getElementById('videoElement')
      // console.log(videoElement)
      var videoElement = document.getElementById("videoId");
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        url: "http://1011.hlsplay.aodianyun.com/demo/game.flv"
      });

      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      this.flvPlayer.play();
      // }
      // }
    }
    // initMap() {
    //   // 传入密钥获取地图回调。
    //   loadBaiDuMap()
    //     .then(BMapGL => {
    //       // 创建地图实例
    //       let map = new BMapGL.Map("container");
    //       // 创建点坐标 axios => res 获取的初始化定位坐标
    //       let point = new BMapGL.Point(113.262851, 23.253817);
    //       // 初始化地图，设置中心点坐标和地图级别
    //       map.centerAndZoom(point, 20);
    //       //开启鼠标滚轮缩放
    //       map.enableScrollWheelZoom(true);
    //       console.log(map);
    //       map.setHeading(2);
    //       map.setTilt(73);
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.width {
  width: 100%;
}
.height {
  height: 100%;
}
.box {
  background: #0e1348;
  border: 0.2vw solid #225bc3;
  border-radius: 0.5vw;
}
.index-title {
  font-family: PingFang SC;
  font-weight: 500;
  color: #cbd7fa;
  font-size: 1vh;
  padding: 0.8vh;
}
.border-jiao {
  position: absolute;
  border: 0.18vw solid #41c7e3;
  width: 0.4vw;
  height: 0.4vw;
}

.big-screen-box {
  .width;
  .height;
  // center
  .b-s-c {
    height: 100%;
    padding: 0 3vh;
    display: flex;
    justify-content: center;
    padding-bottom: 1.5%;
    // left
    .b-s-c-l {
      .width;
      .height;
      .left {
        height: 100%;
        padding-right: 3%;
      }
      .right {
        .height;
        display: flex;
        flex-direction: column;
      }

      .b-s-c-l-top {
        height: 50%;
        .width;
        margin-bottom: 3%;
      }
      .b-s-c-l-but {
        .width;
        height: 49%;
      }
      .b-s-c-l-1 {
        color: #fff;
        .width;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 14%;
        .car-box1 {
          .flex;
          width: 100%;
          flex-direction: row;
          .car-item {
            flex: 1;
            .car-item-img {
              width: 1.5vw;
              height: 1.5vw;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
      }

      .b-s-c-l-2 {
        .width;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        padding-bottom: 3%;
        height: 14.83333%;
        .car-box2 {
          .flex;
          .height;
          width: 100%;
          flex-direction: row;
          .car-item {
            flex: 1;
            .flex;
            flex-direction: column;
            line-height: 2;
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.8vw;
              border-radius: 50%;
              height: 2.4vw;
              width: 2.4vw;
              display: flex;
              .flex;
            }
            .border1 {
              border: 0.25vw solid #e94c58 !important;
            }
            .border2 {
              border: 0.25vw solid #f58b52 !important;
            }
            .border3 {
              border: 0.25vw solid #0ad49b !important;
            }
            .border4 {
              border: 0.25vw solid #ebd502 !important;
            }
          }
        }
      }
      .b-s-c-l-3 {
        .width;
        height: 97%;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
      }
      .b-s-c-l-4 {
        .width;
        height: 97%;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .vlue-title {
          .flex;
          flex: 0.1;
          width: 100%;
          color: #fff;
          .v-t-box {
            flex: 1;
            .flex;
            flex-direction: column;
            .text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
            }
            .value {
              font-weight: bold;
              font-size: 1.2vw;
            }
          }
        }
      }
      .b-s-c-c-2 {
        width: 100%;
        height: 38.5%;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
        margin: 3% 0;
      }
      .b-s-c-r-3 {
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin-bottom: 3%;
        height: 17%;
        .car-box1 {
          .flex;
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          .car-item {
            width: 33%;
            margin: 0.2vw 0;
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
      }
      .b-s-c-r-2 {
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        height: 11%;
        padding-bottom: 0.8vh;

        .car-box2 {
          .flex;
          width: 100%;
          flex-direction: row;
          height: 100%;
          line-height: 2;
          .car-item {
            flex: 1;
            .car-item-img {
              width: 1.5vw;
              height: 1.5vw;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
      }
    }
    // center
    .b-s-c-c {
      .width;
      .height;
      display: flex;
      flex-direction: column;

      .top {
        height: 75%;
        width: 100%;
        padding: 03%;
      }
      .but {
        height: 25%;
        padding: 0 3%;
        width: 100%;
      }
      .b-s-c-c-1 {
        width: 100%;
        height: 100%;
        background: url(../../assets/c-bg.png) no-repeat 30%;
        background-size: 280%;
        position: relative;

        .b-c-user-box {
          position: absolute;
          top: 17%;
          left: 5%;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          width: 11vw;
          height: 6vw;
          .flex;
          flex-direction: column;
          padding: 0.6vw;
          .u-img {
            height: 5vw;
            width: 6.5vh;
          }
          .u-info {
            font-weight: 400;
            color: #ffffff;
            line-height: 1.5;
            font-size: 0.7vw;
            margin-top: 0.7vw;
            position: relative;
          }
          .left-top {
            left: 0;
            top: 0;
            border-right: none;
            border-bottom: none;
          }
          .right-top {
            right: 0;
            top: 0;
            border-left: none;
            border-bottom: none;
          }
          .left-bottom {
            left: 0;
            bottom: 0;
            border-right: none;
            border-top: none;
          }
          .right-bottom {
            right: 0;
            bottom: 0;
            border-left: none;
            border-top: none;
          }
        }
        .b-c-user-box2 {
          position: absolute;
          top: 40%;
          left: 68%;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          width: 8vw;
          height: 4vw;
          .flex;
          flex-direction: column;
          .u-info {
            font-weight: 400;
            color: #ffffff;
            line-height: 32px;
            font-size: 0.7vw;
            margin-top: 0.8vw;
            position: relative;
          }
          .left-top {
            left: 0;
            top: 0;
            border-right: none;
            border-bottom: none;
          }
          .right-top {
            right: 0;
            top: 0;
            border-left: none;
            border-bottom: none;
          }
          .left-bottom {
            left: 0;
            bottom: 0;
            border-right: none;
            border-top: none;
          }
          .right-bottom {
            right: 0;
            bottom: 0;
            border-left: none;
            border-top: none;
          }
        }
        .b-s-c-c-1-text1 {
          position: absolute;
          top: 29%;
          left: 40%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text2 {
          position: absolute;
          top: 59%;
          left: 39%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text3 {
          position: absolute;
          top: 18%;
          left: 61%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text4 {
          position: absolute;
          top: 64%;
          left: 65%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-text5 {
          position: absolute;
          top: 80%;
          left: 55%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
        }
        .b-s-c-c-1-yuan-red {
          position: absolute;
          top: 49%;
          left: 33%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
          width: 2vw;
          height: 2vw;
          background: url("../../assets/index/yuan-red.png") no-repeat 50%;
          background-size: cover;
        }
        .b-s-c-c-1-yuan-h {
          position: absolute;
          top: 28%;
          left: 63%;
          font-size: 0.7vw;
          font-weight: 400;
          color: #ffffff;
          width: 2vw;
          height: 2vw;
          background: url("../../assets/index/yuan-h.png") no-repeat 50%;
          background-size: cover;
        }
      }

      .b-s-c-c-3 {
        width: 100%;
        height: 95%;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        position: relative;
      }
    }
    // right
    .b-s-c-r {
      .width;
      .height;
      display: flex;

      .left {
        .height;
      }
      .right {
        padding-left: 3%;
        margin: 0.25vw 0;
        .right-box {
          .box;
          height: 99%;
          .width;
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          .video-box {
            .height;
            .width;
            overflow: auto;
            .video-item {
              .width;
              display: flex;
              align-items: flex-start;
              flex-direction: column;
              flex: 1;
              .item-box {
                display: flex;
                flex-wrap: wrap;
                .video-f {
                  width: 48%;
                  display: flex;
                  padding: 1%;
                  .video-css {
                    .width;
                  }
                }
              }
            }
          }
          .video-box::-webkit-scrollbar {
            display: none;
          }
        }
      }
      .b-s-c-r-1 {
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        height: 17%;
        margin: 0.25vw 0;
        padding-bottom: 0.8vh;
        overflow: auto;
        .b-s-c-r-1-title {
          font-weight: 400;
          color: #ffffff;
          background: #3478ff;
          border-radius: 5px;
          width: 16vh;
          font-size: 1.6vh;
          padding: 0.2vh;
          margin-left: 0.6vw;
          cursor: pointer;
        }
        .b-s-c-r-1-text {
          font-weight: 400;
          color: #ffffff;
          margin-left: 0.6vw;
          font-size: 1.2vh;
          margin-top: 0.3vw;
        }
      }

      .b-s-c-r-4 {
        height: 41.5%;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        position: relative;
        padding: 0.8vh 0;
      }
      .b-s-c-r-5 {
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        .width;
        margin: 0.25vw 0;
        position: relative;
        height: 20%;
        .car-box1 {
          .flex;
          height: 65%;
          width: 100%;
          flex-direction: row;
          .car-item {
            flex: 1;
            line-height: 1.5;
            .car-item-img {
              width: 2vw;
              height: 2vw;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
        .bottom-title {
          width: 100%;
          position: absolute;
          bottom: 0;
          background: #3478ff;
          border-radius: 0px 0px 0.4vw 0.4vw;
          .flex;
          justify-content: space-between;
          font-weight: 400;
          color: #ffffff;
          height: 20%;
          font-size: 1.3vh;
        }
      }
      .b-s-c-l-5 {
        color: #fff;
        .width;
        .box;
        display: flex;
        flex-direction: column;
        align-items: start;
        height: 12%;
        padding-bottom: 0.8vh;
        .car-box1 {
          .flex;
          width: 100%;
          flex-direction: row;
          height: 100%;
          line-height: 2;
          .car-item {
            flex: 1;
            .car-item-img {
              width: 1.5vw;
              height: 1.5vw;
            }
            .car-item-text {
              font-weight: 400;
              color: #cbd7fa;
              font-size: 0.7vw;
              padding-bottom: 0.3vw;
            }
            .car-item-value {
              font-weight: 400;
              color: #cbd7fa;
              font-family: DIN Alternate;
              font-weight: bold;
              color: #ffffff;
              font-size: 0.9vw;
              padding-bottom: 0.3vw;
            }
          }
        }
      }
    }
  }
}
</style>
